<template>
	<!-- 导航栏目 -->
	<view class="custom-tab-bar" :style="{ paddingBottom: winBottom ? winBottom + 'rpx' : 0 }">
		<view v-for="(item, index) in tabbar" @tap="goToPage(item)" class="tab-item">
			<image v-if="index == currentTab && item.selectedIconPath" :src="item.selectedIconPath" class="tab-image"></image>
			<image v-else-if="item.iconPath" :src="item.iconPath" class="tab-image"></image>
			<view :style="{ color: index == currentTab ? '#FB353B' : '#8E8E8E' }" v-if="item.type == 'string'">{{ item.text }}</view>
			<image v-else-if="item.type == 'image'" :src="item.image" class="image-info"></image>
		</view>
	</view>
	<tui-bottom-popup :zIndex="1002" paddingBottom="0" backgroundColor="none" :maskZIndex="1001" :show="fabuPopup" @close="hiddenPopup">
		<view class="pupup-container">
			<view class="dabai-img">
				<image src="/static/images/tabbar/dabai.png" mode="widthFix" style="width: 418rpx"></image>
				<tui-icon name="close" color="#fff" size="30" style="margin-top: 100rpx" @tap="hiddenPopup"></tui-icon>
			</view>
			<image src="/static/images/tabbar/fabuBGC.png" class="popup-bgc"></image>
			<view class="pupup-info">
				<view class="popup-header">
					<view class="left-box">
						<image src="/static/images/tabbar/caogao.png" mode="widthFix" style="width: 30rpx; border-radius: 0"></image>
						<view class="">草稿箱</view>
					</view>
					<image src="/static/images/tabbar/fabuType.png" mode="widthFix" style="width: 288rpx"></image>
				</view>
				<view class="fabu-container">
					<view class="fabu-box" v-for="(item, index) in fabuTab" @tap="fabuInfo(index)">
						<view class="left-box">
							<image :src="item.Image" mode="widthFix" style="width: 128rpx"></image>
							<view class="left-info">
								<view class="popup-biaoti">{{ item.Biaoti }}</view>
								<view class="popup-title">{{ item.title }}</view>
							</view>
						</view>
						<tui-icon name="arrowright" color="#000" size="25" @tap="hiddenPopup"></tui-icon>
					</view>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
</template>

<script>
export default {
	props: {
		currentTab: {
			type: Number,
			default: () => 0
		}
	},

	data() {
		return {
			tabbar: [
				{
					text: '发现',
					type: 'string',
					pagePath: 'find/find'
				},
				{
					text: '活动',
					type: 'string',
					pagePath: 'huodong/huodong'
				},
				{
					image: '/static/images/tabbar/addBtn.png',
					type: 'image',
					pagePath: 'my/huodong/HDfabu'
				},
				{
					text: '消息',
					type: 'string',
					pagePath: 'message/message'
				},
				{
					text: '我',
					type: 'string',
					pagePath: 'my/my'
				}
			],
			Tabindex: this.currentTab,
			fabuTab: [
				{
					Image: '/static/images/tabbar/xiangji.png',
					Biaoti: '发文章',
					title: '发布图文、视频，交流消费心得'
				},
				{
					Image: '/static/images/tabbar/fahuodong.png',
					Biaoti: '发活动',
					title: '发布活动，快乐交友'
				}
			],
			fabuPopup: false,
			winBottom: 0
		};
	},
	mounted() {
		this.getWindowHide();
	},
	methods: {
		getWindowHide() {
			var res = uni.getSystemInfoSync();
			this.winBottom = res.safeAreaInsets.bottom;
		},
		fabuInfo(index) {
			this.hiddenPopup()
			this.Microi.RouterPush('/pages/my/huodong/HDfabu?currentTab=' + index, true);
		},
		hiddenPopup() {
			this.fabuPopup = false;
		},
		goToPage(item) {
			if (item.type == 'string') {
				uni.switchTab({
					url: `/pages/tabbar/${item.pagePath}`
				});
			} else {
				// this.Microi.RouterPush(`/pages/${item.pagePath}`, true);
				this.fabuPopup = true;
			}
		}
	}
};
</script>

<style>
.custom-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	/* height: calc(56rpx * 1.9); */
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 18rpx 30rpx;
	border-top: 2rpx solid #ebebeb;
	z-index: 999;
}

.tab-item {
	text-align: center;

	width: 68rpx;
	font-weight: 800;
	font-size: 32rpx;
	color: #fb353b;
	line-height: 64rpx;
	letter-spacing: 1px;
	font-style: normal;
	text-transform: none;
	text-align: center;

	white-space: nowrap;
}
.tab-image {
	width: calc(20rpx * 1.9);
	height: calc(20rpx * 1.9);
}

.image-info {
	width: 88rpx;
	height: 64rpx;
	/* background: #FB353B; */
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.pupup-container {
	position: relative;
	height: 1000rpx;
}
.dabai-img {
	position: absolute;
	left: 0;
	bottom: 544rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-right: 20rpx;
	box-sizing: border-box;
}
.popup-bgc {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 682rpx;
}
.pupup-info {
	position: absolute;
	left: 0;
	bottom: 150rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0 36rpx;
}
.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.popup-header .left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: PingFang SC, PingFang SC;
	font-size: 26rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.fabu-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20rpx;
}
.fabu-box {
	width: 676rpx;
	height: 152rpx;
	background: #ffffff;
	box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(0, 0, 0, 0.02);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 12rpx 14rpx;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fabu-box .left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14rpx;
	flex: 1;
}
.left-info {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 20rpx;
}
.popup-biaoti {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.popup-title {
	font-family: PingFang SC, PingFang SC;
	font-size: 26rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
</style>
